<!--
 * @Author: chunlai
 * @Date: 2023-12-12 18:19:53
 * @LastEditTime: 2025-11-26 10:08:17
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\views\index\components\precount\UserItem.vue
 * @Description: 被保人对象
-->
<template>
  <div>
    <div class="topSec thin-border" v-if="bbrListNum > 1">
      <div class="flex_ac ft14" style="line-height: 20px">
        被保人{{ `${pindex + 1}` }}
        <!-- <span
          :class="enfold ? 'ms-row2-icon' : 'ms-row-icon'"
          style="margin-left: 8px"
          @click="enfold = !enfold"
        ></span> -->
      </div>
      <div class="flex_ac">
        <MsImgIcon name="delete" class="ml20" size="18" @click.native="delUserItem" />
      </div>
    </div>
    <div class="flex-cont">
      <div class="flex-cont-l">为谁投保</div>
      <div class="flex-cont-r">
        <MsRadio
          :arrList="tbgxList"
          :curVal="userInfo.relationToAppnt"
          btnType="relation"
          labelName="text"
          valueName="keyId"
          @clickEvent="clickEvent"
        />
      </div>
    </div>
    <div class="flex-cont">
      <div class="flex-cont-l">出生日期</div>
      <div class="flex-cont-r">
        <SelectAge
          :age="userInfo.age"
          :birthDate="userInfo.birthDate"
          :minDate="bbBirthMin"
          :maxDate="bbBirthMaxDay"
          @showTimes="showTimes"
        />
      </div>
    </div>
    <div class="flex-cont">
      <div class="flex-cont-l">性别</div>
      <div class="flex-cont-r">
        <MsRadio
          :arrList="sexList"
          :curVal="userInfo.sex"
          btnType="sex"
          labelName="text"
          valueName="keyId"
          @clickEvent="clickEvent"
        />
      </div>
    </div>
    <div class="flex-cont">
      <div class="flex-cont-l">有无社保</div>
      <div class="flex-cont-r">
        <MsRadio
          :arrList="socialSecList"
          :curVal="userInfo.socialInsuFlag"
          btnType="socialInsuFlag"
          labelName="text"
          valueName="keyId"
          @clickEvent="clickEvent"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SelectAge from "./SelectAge";
import { dateToString } from "@/methods/date.js";
export default {
  name: "UserItem",
  props: {
    pindex: {
      type: [String, Number],
      default: () => 0,
    },
  },
  components: {
    SelectAge,
  },
  data() {
    return {
      userInfo: {
        sex: "",
        birthDate: "",
        age: "",
        idNum: "",
        socialInsuFlag: "",
        relationToAppnt: "",
      },
    };
  },
  computed: {
    ...mapGetters({
      assuredList: "insert/assuredList",
      ageRange: "infoReg/ageRange",
      tbBirthMin: "infoReg/tbBirthMin",
      tbBirthMax: "infoReg/tbBirthMax",
      bbBirthMin: "infoReg/bbBirthMin",
      bbBirthMax: "infoReg/bbBirthMax",
      sexList: "dictionary/sexList",
      socialSecList: "dictionary/socialSecList",
      bbrToTbrRela: "dictionary/bbrToTbrRela",
    }),
    bbrListNum() {
      return this.assuredList.length;
    },
    tbgxList() {
      let res = this.bbrToTbrRela;
      if (this.pindex > 0) {
        res = this.bbrToTbrRela.filter((ele) => ele.keyId != "4");
      }
      return res;
    },
    isSelf() {
      let res = false;
      const fdObj = this.tbgxList.find((ele) => ele.keyId == "4");
      if (fdObj && this.userInfo.relationToAppnt == "4") {
        res = true;
      }
      return res;
    },
    getTbrMinAge() {
      let res = 0;
      const obj = this.ageRange.applicant || {};
      if (obj.minAge) {
        res = obj.minAge;
      }
      return res;
    },
    getBbrMinAge() {
      let res = 0;
      const obj = this.ageRange.insured || {};
      if (obj.minAge && !obj.isDate) {
        res = obj.minAge;
      }
      return res;
    },
    bbBirthMaxDay() {
      let res = this.bbBirthMax;
      if (this.isSelf && this.getTbrMinAge > this.getBbrMinAge) {
        res = this.tbBirthMax;
      }
      return res;
    },
  },
  watch: {
    userInfo: {
      handler: function (val) {
        this.$store.commit("insert/UPDATE_ASSURED", {
          index: this.pindex,
          data: val,
        });
      },
      deep: true,
    },
  },
  created() {
    let obj = this.assuredList[this.pindex];
    this.changeData(obj);
    // this.initUserModule(obj);
    this.pageLoad = true;
  },
  mounted() {},
  methods: {
    initUserModule(userItem) {
      // console.log(userItem);
      let obj = {};
      if (userItem.idNum == "") {
        let bbrdate = this.bbBirthMaxDay;
        obj = {
          birthDate: dateToString(bbrdate),
          age: this.$GlobalFuns.userAge(dateToString(bbrdate)),
          socialInsuFlag: "Y",
          sex: "1",
        };
        const fdObj = this.tbgxList.find(
          (ele) => ele.keyId == userItem.relationToAppnt
        );
        if (!fdObj) {
          const len = this.tbgxList.length;
          obj.relationToAppnt = this.tbgxList[len - 1].keyId;
          obj.relationToAppntName = this.tbgxList[len - 1].text;
        } else {
          obj.relationToAppnt = userItem.relationToAppnt;
        }
      } else {
        Object.assign(obj, userItem);
      }
      this.changeData(obj);
    },
    showTimes(objVal, type) {
      this.changeData(objVal);
    },
    clickEvent(obj, btnType) {
      let setItem = {};
      if (btnType == "sex") {
        setItem.sex = obj.keyId;
      } else if (btnType == "socialInsuFlag") {
        setItem = {
          socialInsuFlag: obj.keyId,
          socialInsuFlagName: obj.text,
        };
      } else if (btnType == "relation") {
        setItem = {
          relationToAppnt: obj.keyId,
          relationToAppntName: obj.text,
        };
        if (obj.keyId == "4") {
          let srval = dateToString(this.tbBirthMax);
          let tbrObj = {
            birthDate: srval,
            age: this.$GlobalFuns.userAge(srval),
            socialInsuFlag: "Y",
            sex: "1",
          };
          Object.assign(setItem, tbrObj);
        }
      }
      this.changeData(setItem);
    },
    delUserItem() {
      this.$baseConfirm(`是否要删除被保人${this.pindex + 1}?`, () => {
        this.$store.commit("insert/DELETE_ASSURED", this.pindex);
        this.$nextTick(() => {
          this.$store.dispatch("risks/setRisks", {});
        });
      });
    },
    changeData(data) {
      Object.assign(this.userInfo, data);
      if (this.userInfo.relationToAppnt == "4") {
        this.$store.commit("insert/UPDATE_APPLICANT", this.userInfo);
      }
      this.$forceUpdate();
      this.$nextTick(() => {
        this.$store.dispatch("risks/setRisks", {});
      });
    },
  },
};
</script>
<style lang="less" scoped>
.topSec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 6px;
  &.thin-border {
    &::after {
      border: none;
      border-bottom: 1px dashed #e5e5e5;
    }
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: -3px;
    bottom: 0;
    margin: auto;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: #ff5f4e;
  }
}
.flex-cont {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #ededed;
    transform: scaleY(0.5);
  }
  .flex-cont-l {
    line-height: 30px;
    color: #747474;
  }
  .flex-cont-r {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
.del_ico {
  margin-left: 10px;
  font-size: 16px;
  color: #f54040;
}
</style>
